<template>
  <div ref="headerTop" class="header-other">
    <div class="header-container">
      <img src="https://www.labautobio.com/_next/static/media/logo_footer.46b3b702.svg" valu="2" @click="toIndex" />
      <div class="header_banner">
        <div v-for="(item, index) in headerList" :key="index" class="nav" :class="currentClass(item?.path)">
          <div class="p" @click="nav(item?.path)">
            {{ item?.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch, getCurrentInstance } from "vue";
import router from "@/router";
import { useStore } from "vuex";
import { getSession } from "@/public/utils";



const proxy = getCurrentInstance()?.proxy;

const { state, commit, dispatch } = useStore();
const loginStatus = ref(false);

const submenuRef = ref(null);
const mouseenterRef = ref(null);
const mouseleaveRef = ref(null);
const props = defineProps({
  currentLogo: {
    type: String,
    require: true,
    default: "",
  },
});
// import Production from '../views/production/index.vue';
// import Solution from '../views/solution/index.vue';
// import Activity from '../views/activity/index.vue';
// import Technology from '../views/technology/index.vue';
// import Expore from '../views/expore/index.vue';
console.log(props.currentLogo, "currentLogo");
const headerList = ref([
  {
    name: "首页",
    path: "/",
  },
  {
    name: "产品",
    path: "/production",
  },

  {
    name: "解决方案",
    path: "/solution",
  },
  {
    name: "雷奥活动",
    path: "/activity",
  },


  {
    name: "技术支持",
    path: "/technology",
  },
  {
    name: "探索雷奥",
    path: "/expore",
  },
]);
function jump(item) {
  console.log(item, "item");
  window.open(item.url);
}

function toIndex() {
  router.push({
    path: "/",
  });
}
function currentClass(path: string) {
  if (router.currentRoute.value.path === path) {
    return "active";
  } else if (
    router.currentRoute.value.path !== path &&
    router.currentRoute.value.meta.current === path
  ) {
    return "active";
  }
  if (router.currentRoute.value.path === "/pay" && path === "/collection") {
    return "active";
  }
  if (router.currentRoute.value.path === "/newsDetail" && path === "/news") {
    return "active";
  }
  if (router.currentRoute.value.path === "/pay" && path === "/collection") {
    return "active";
  }
  if (router.currentRoute.value.path === "/constructorList" && path === "/constructor") {
    return "active";
  }

  return "";
}
function nav(path: string) {
  if (path == "/assetsRegister") {
    return;
  }
  router.push({
    path,
  });
}

let userInfo = getSession("userInfo");
watch(
  () => state.home.isLogin,
  (val) => {
    console.log(val, "state.home.isLogin");
    userInfo = getSession("userInfo");
    if (val) {
      // 登录状态
      loginStatus.value = true;
    } else {
      loginStatus.value = false;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
watch(
  () => submenuRef,
  (val) => {
    console.log(val, "submenuRef");
  },
  {
    deep: true,
    immediate: true,
  }
);
const classHeader = ref("");

</script>
<style lang="scss" scoped>
.header-other {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  width: 100%;
  box-sizing: border-box;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.75) 100%);
  box-shadow: 0px 4px 16px 0px rgba(0, 86, 173, 0.15);
  line-height: 70px;

  font-size: 16px;
  font-weight: 400;

  .submenu-container {
    height: 166px;
    background: #fff;

    .container {
      width: 1200px;
      margin: 0 auto;
    }
  }

  .header-container {
    height: 70px;
    margin: 0 auto;
    width: 1200px;
    display: flex;
    align-items: center;
    // transition: all 0.2s;
    justify-content: space-between;

    img {
      cursor: pointer;
      width: 180px;
      height: auto;
    }

  }

  img {
    width: 152px;
  }

  .header_banner {
    display: flex;
    cursor: pointer;

    div.nav {
      margin-right: 24px;
      font-weight: 500;
      cursor: pointer;

      .submenu {
        position: absolute;
        left: 0;
        width: 100vw;
        top: 70px;
        background: #ffffff;
        height: 0;
        box-shadow: 0px 4px 16px 0px rgba(0, 86, 173, 0.15);
        transition: all 0.3s ease-out;
        overflow: hidden;

        .submenu-container {
          display: flex;
          justify-content: space-between;
          width: 1200px;
          margin: 0 auto;
          padding: 20px;
        }

        .subItem {
          width: 280px;

          background-repeat: no-repeat;
          background-color: #e2f1ff;
          border-radius: 8px;
          padding: 35px 24px;
          transition: all 0.3s ease-out;
          background-size: 100%;

          &:hover {
            background-size: 103% !important;
          }

          .title {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 18px;
            color: #303133;
            line-height: 27px;
            margin-bottom: 8px;

            img {
              width: 16px;
              height: 16px;
              margin-left: 8px;
            }
          }

          .des {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #606266;
            line-height: 20px;
          }
        }
      }
    }

    .p {
      font-weight: 400;
      font-size: 16px;
      color: #303133;

      .arrow-icon {
        color: #a7abb2;

        .iconfont {
          transition: all 0.3s;
        }
      }

      img {
        width: 16px;
        height: 16px;
      }
    }

    div.nav {
      border-bottom: 3px solid transparent;
    }

    div.nav:hover {
      color: #3370ff;

      .p {
        color: #3370ff;
        font-family: Source Han Sans CN Medium;
        font-weight: 500;

        .arrow-icon {
          color: #3370ff;

          .iconfont {
            -ms-transform: rotate(180deg) !important;
            /* IE 9 */

            -webkit-transform: rotate(180deg) !important;
            /* Safari and Chrome */

            transform: rotate(180deg) !important;
          }
        }
      }

      .submenu {
        height: 166px;
      }
    }

    div.nav.active {
      color: #3370ff;

      .p {
        position: relative;
        color: #3370ff;
        font-family: Source Han Sans CN Medium;
        font-weight: 500;

        &:before {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          height: 2px;
          width: 100%;
          background: #3370ff;
          border-radius: 2px 2px 0px 0px;
        }
      }
    }
  }
}
</style>
